<template>
  <el-dialog :title="!dataForm.id ? '添加' : '编辑'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">

      <div>
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="拓展信息"></el-step>
        </el-steps>
      </div>
      <div v-if="active==0">
        <div>
          <el-form-item label="平台服务分类">
            <el-button>选择商品类目</el-button>
            <span>此商品对应的类目，分类由平台管理</span>
          </el-form-item>
          <el-form-item label="店铺服务分组">
            <el-button>选择商品类目</el-button>
            <span>此商品对应的店铺分组，分类由店铺管理</span>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="服务名称">
            <el-input maxlength="10" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="服务编码">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label=" 商家统一价">
            <el-input></el-input>
            <span>选填，与商家自由系统对接时需要</span>
          </el-form-item>
          <el-form-item label="市场价">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="服务图片">
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <span>尺寸建议750x750（正方形模式）或750×1000（长图模式）像素以上，大小2M以下，最多10张 (可拖拽图片调整显示顺序 )</span>
          </el-form-item>
          <el-form-item label="服务视频">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <video v-if="imageUrl" :src="imageUrl" class="avatar" controls="controls"></video>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span>上传视频时封面图片尺寸建议与商品图片一致</span>
          </el-form-item>
        </div>
      </div>
      <!--拓展信息-->
      <div v-if="active==1" class="">
        <el-table :data="tableData" border @selection-change="selectionChangeHandle" @cell-dblclick="celledit">
          <el-table-column>
            <template slot="header" slot-scope="scope">
              <el-button @click="addRow()">新增</el-button>
              <el-button @click="batchDelete(tableDataSelections)">删除</el-button>
            </template>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="date" label="日期" width="180">
              <template slot-scope="scope">
                <el-date-picker v-if="scope.row.date.edit" v-model="scope.row.date.value" ref="date" style="width: 100%" type="date" value-format="yyyy-MM-dd" @blur="scope.row.date.edit = false">
                </el-date-picker>
                <span v-else>{{ scope.row.date.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180" edit="false">
              <template slot-scope="scope">
                <el-input v-if="scope.row.name.edit" ref="name" v-model="scope.row.name.value" style="width: 100%" @blur="scope.row.name.edit = false">
                </el-input>
                <span v-else>{{ scope.row.name.value }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" width="260" label="地址">
              <template slot-scope="scope">
                <el-input v-if="scope.row.address.edit" ref="address" v-model="scope.row.address.value" style="width: 100%" @blur="scope.row.address.edit = false">
                </el-input>
                <span v-else>{{ scope.row.address.value }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="mt10">
          <el-form-item label="免费福利">
            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="memberhandleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="memberhandleInputConfirm" @blur="memberhandleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="membershowInput">添加</el-button>
          </el-form-item>

          <el-form-item label="消费有效期">
            <el-col :span="4">
              <el-input placeholder=""></el-input>
              <span>天</span>
              <span>过期后未消费自动退款</span>
            </el-col>
          </el-form-item>
          <el-form-item label="提前">
            <el-col :span="4">
              <el-input placeholder=""></el-input>
              <span>天预约</span>
            </el-col>
          </el-form-item>
          <el-form-item label="商品标签">
            <el-col :span="4">
              <el-input placeholder=""></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="初始销量">
            <el-col :span="6">
              <el-input placeholder=""></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="排序">
            <el-col :span="6">
              <el-input placeholder=""></el-input>
              <span>数字越大越靠前</span>
            </el-col>
          </el-form-item>
        </div>
      </div>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">提交</el-button>
      <el-button v-if="active==0" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active==1" type="primary" @click="next">上一步</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  treeDataTranslate
} from '@/utils'

export default {
  data () {
    return {
      visible: false,
      active: 0, // 步骤初始化
      dataForm: {
        id: '0'
      },
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        edit: false
      }],
      tableDataSelections: [], // 选中的表格数据
      dynamicTags: [], // 免费福利
      inputVisible: false,
      inputValue: '',
      imageUrl: null,
      dataRule: {}
    }
  },
  created () {
    this.formatData()
  },
  methods: {
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      // })
    },
    // 步骤
    next () {
      if (this.active++ > 1) this.active = 0
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    formatData () {
      this.tableData.forEach(item => {
        for (let key in item) {
          item[key] = {
            value: item[key],
            edit: false
          }
        }
      })
    },
    // 表格新增行
    addRow () {
      this.tableData.push({
        date: {
          value: '',
          edit: true
        },
        name: {
          value: '',
          edit: true
        },
        address: {
          value: '',
          edit: true
        }
      })
    },
    // 多选
    selectionChangeHandle (val) {
      this.tableDataSelections = val
    },
    // 删除选中数据（单纯实现前端删除）
    batchDelete (selections) {
      console.log(selections)
      if (selections.length > 0) {
        this.$confirm(`确定删除选中数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < selections.length; i++) {
            for (let y = 0; y < this.tableData.length; y++) {
              if (this.tableData[y] == selections[i]) {
                this.tableData.splice(y, 1)
                break
              }
            }
          }
        }).catch(() => { })
      }
    },
    // 单元格双击事件
    celledit (row, column, cell, event) {
      if (row[column.property]) {
        row[column.property].edit = true
        setTimeout(() => {
          this.$refs[column.property].focus()
        }, 20)
      }
    },
    // 会员福利
    memberhandleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    membershowInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    memberhandleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss">
.mt10 {
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
